<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" @click="goback"></i>
      <p>更改密码</p>
    </header>

    <div class="change">

      <div class="sty">
        <div class="title">
          新密码：
        </div>
        <div class="content">
          <input type="password" v-model="user.password" placeholder="密码 需包括字母，数字，特殊字符" class="in">
        </div>
      </div>

      <div class="sty">
        <div class="title">
          确认密码：
        </div>
        <div class="content">
          <input type="password" v-model="confirmPassword" placeholder="确认密码" class="in">
        </div>
      </div>

      <div class="button-change">
        <button @click="ChangePassword">确认</button>
      </div>

    </div>


  </div>
</template>


<script>
import CryptoJS from "crypto-js";

export default {
  name: 'ChangeImg',
  data() {
    return {
      user: {},
      confirmPassword:''
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
    this.getUserInfo();
  },

  methods: {
    ChangePassword(){
      var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/;
      if (!passwordreg.test(this.user.password)) {
        alert('密码格式不正确，需包括字母，数字，特殊字符！');
        return;
      }
      if (this.user.password != this.confirmPassword) {
        alert('两次输入的密码不一致！');
        return;
      }

      this.user.password=CryptoJS.SHA256(this.user.password).toString()
      this.confirmPassword = CryptoJS.SHA256(this.user.confirmPassword).toString()

      let url = `UserController/updateUserById/${this.user.userId}/${this.user.password}/${this.user.userName}/${this.user.userSex}/${this.user.userImg}/${this.user.delTag}`;
      this.$axios.put(url,{},{
        headers : {
          'token': sessionStorage.getItem('token')
        }
      }).then(response => {
        if (response.data.result > 0) {
          alert('更改密码成功！');
          this.getUserInfo(); // 获取最新的用户信息
          this.$router.go(-1);
        } else {
          alert('更改密码失败！');
        }
      }).catch(error => {
        console.error(error);
      });
    },

    goback() {
      this.$router.go(-1);
    },

    getUserInfo() {

      let url = `UserController/getUserById/${this.user.userId}`;
      this.$axios.get(url).then(response => {
        this.user = response.data.result;
        this.$setSessionStorage('user', this.user); // 保存最新的用户信息到会话存储
      }).catch(error => {
        console.error(error);
      });
    }

  }
}

</script>
<style scoped>
.wrapper header {
  width: 100%;
  height: 12vw;
  background: linear-gradient(#F37373, #F08080, #EF9292);
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;

}

.wrapper header i {
  margin-left: 6vw;
}

.wrapper header p {
  margin-left: 33vw;
}

/****************** 文字部分 ******************/
.wrapper .change {
  padding-top: 16vw;
}

.wrapper .change p {
  font-size: 4.8vw;
  padding-left: 6vw;
  padding-bottom: 6vw;
  color: #666666;
}

/****************** 更改部分 ******************/
.wrapper .change .sty {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;

}

.wrapper .change .sty .title {
  padding: 0 2vw 3vw 5vw;
  font-size: 4.8vw;
  color: #666666;
}

.wrapper .change .sty .content {
  padding: 0 0 3vw 4vw;
  width: 90%;
  height: 7vw;

}

.wrapper .change .sty .content .in {
  width: 85%;
  height: 8vw;
  border: 1px solid #D5D8DC;
  outline: none;
  padding-left: 2vw;

}

/****************** 按钮部分 ******************/
.wrapper .button-change {
  width: 100%;
  box-sizing: border-box;
  padding: 10vw 3vw 0 3vw;
}

.wrapper .button-change button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(#F37373, #F08080, #EF9292);
  border-radius: 4px;
  border: none;
  outline: none;
}

</style>
